<template>
    <div>
        <!-- 用户管理 -->
        <div class="all-container">
            <!-- 筛选功能栏 -->
            <el-row class="fun-container">
                <el-col :span="24">
                    <div class="lf choose-title org-title">工号</div>
                    <el-input v-model="ID" placeholder="" size="mini" style="width:150px;" class="lf choose-input org-input"></el-input>
                    <div class="lf choose-title org-title">姓名</div>
                    <el-autocomplete v-model="name" placeholder="" size="mini" style="width:150px;" class="lf choose-input org-input"></el-autocomplete>
                    <button class="check-btn rf" @click="check">
                    <img src="../../assets/imgs/xoperation_btn_icon_saixuan_default.png" alt="" class="btn-img">筛选</button>
                </el-col>
            </el-row>
            <!-- 表格功能栏 -->
            <el-row>
                <el-col :span="24" class="table-fun">
                    <img src="../../assets/imgs/operation_icon_shuaxin_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="refresh">刷新</div>
                    <img src="../../assets/imgs/operation_icon_tianjia_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="modWin=true;winTitle='添加'">添加</div>
                    <img src="../../assets/imgs/operation_icon_xiugai_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="modWin=true;winTitle='修改'">修改</div>
                    <img src="../../assets/imgs/Radio_icon_chongzhi_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="reset">重置用户密码</div>
                </el-col>
            </el-row>
            <!-- 表格栏 -->
            <avue-crud :data="userList[0].data" :option="userList[0].option"  @current-row-change="rowChange" :page="userList[0].page" @current-change="userPage"></avue-crud>

            <!-- 修改弹窗 -->
            <div v-show="modWin" class="modModal">
                <!-- 标题栏 -->
                <el-row class="add-title">
                     <div class="closeWin" @click="closeModWin">X</div>
                    <el-col :span="24">
                        <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt=""><span class="add-text">{{winTitle}}</span>
                    </el-col>
                </el-row>
                <!-- 表单栏 -->
                <!-- 第一行 -->
                <el-row class="user-row">
                    <el-col :span="24">
                        <div class="lf choose-title">工号</div>
                        <el-input v-model="GongID" placeholder="" size="mini" style="width:150px;" class="lf choose-input user-input"></el-input>
                        <div class="lf choose-title">姓名</div>
                        <el-input v-model="GongName" placeholder="" size="mini" style="width:150px;" class="lf choose-input org-input"></el-input>
                    </el-col>
                </el-row>
                <!-- 第二行 -->
                <el-row class="user-row">
                    <el-col :span="24">
                        <div class="lf choose-title">状态</div>
                         <el-select v-model="state" placeholder="" style="width:150px;" class="lf choose-input user-input" size="mini">
                            <el-option label="启用" value="1"></el-option>
                            <el-option label="禁用" value="2"></el-option>
                        </el-select>
                        <div class="lf choose-title">角色</div>
                        <el-select v-model="roles" placeholder="" style="width:120px !important;" class="lf choose-input user-input" size="mini" multiple>
                            <el-option v-for="item of chartList" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <!-- 第三行 -->
                <el-row class="user-row">
                    <el-col :span="24">
                        <div class="lf choose-title">所属机构</div>
                         <el-select v-model="jiGou" placeholder="" style="width:100px !important;" class="lf choose-input user-input" size="mini">
                            <el-option v-for="item of orgList" :label="item.name_full" :value="item.id"></el-option>
                            <el-option-group
                              v-for="item of orgList"
                              :key="item.name_full"
                              :label="item.name_full">
                              <el-option
                                v-for="itemII in item.options"
                                :key="itemII.id"
                                :label="itemII.name_full"
                                :value="itemII.id">
                              </el-option>
                            </el-option-group>
                        </el-select>
                        <div class="lf choose-title">所属组别</div>
                        <el-select v-model="group" placeholder="" style="width:100px !important;" class="lf choose-input user-input" size="mini">
                            <el-option v-for="item of groupList" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <!-- 按钮 -->
                <button class="check-btn rf" @click="closeModWin">
                <img src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt="" class="btn-img">取消</button>
                <button class="check-btn rf" @click="winTitle=='添加'?add():mod()"><img src="../../assets/imgs/operation_btn_icon_tijiao_default.png" alt="" class="btn-img">确认</button>
            </div>
        </div>
    </div>
</template>

<script>
import TableData from "../../components/common/tableData"
export default {
  data: function() {
    return {
      ID: "",
      name: "",
      userList: [{
        page: {
          pageSizes: [10],
          total: 20,
          currentPage: 1,
          pageSize: 10,
        },
        data:[],
        option:{
          page:true,
          align:'center',
          menu:false,
          highlightCurrentRow:true,
          menuAlign:'center',
          column:[
            {
              label:"所属组别",
              prop:"group_name"
            },
            {
              label:"工号",
              prop:"no"
            },
            {
              label:"姓名",
              prop:"name"
            },
            {
              label:"状态",
              prop:"state"
            },
            {
              label:"所属机构",
              prop:"orgname"
            },
            {
              label:"角色",
              prop:"role_names"
            },
          ]
        }
      }],
      modWin: false,
      winTitle:"test",
      GongID: "",
      GongName: "",
      state: "",
      roles: [],
      jiGou: "",
      group: "",
      currentRow:"",
      chartList:[],
      groupList:[],
      orgList:[]
    };
  },
  methods: {
    userPage(val){
      this.userList[0].page.currentPage=val;
      this.getUserList();
    },
    getUserList() {
      this.postRequest("/sys/user/list",{
        rows:10,
        page:this.userList[0].page.currentPage
      }).then(data => {
        this.userList[0].page.total=data.data.totalRow
        this.userList[0].data=data.data.list;
      });
    },
    check(){
      this.postRequest("/sys/user/list",{
        filterRules:JSON.stringify([
          {"field":"user.no","op":"cn","value":this.ID},{"field":"user.name","op":"cn","value":this.name}
        ]),
        rows:10,
        page:this.userList[0].page.currentPage
      }).then(data=>{
        this.userList[0].page.total=data.data.totalRow;
        this.userList[0].data=data.data.list;
      })
    },
    refresh() {
      this.getUserList();
    },
    add() {
      this
        .getRequest(
          "/sys/user/add?sysUser.id=&sysUser.no="
            +this.GongID+"&sysUser.name="
            +this.GongName+"&sysUser.is_enable="
            +this.state+"&sysUser.org_no="
            +this.jiGou+"&sysUser.group_id="
            +this.group+"&sysUser.role_ids="
            +this.roles.join(",")
            +"&sysUser.role_names="
        )
        .then(data => {
          if (data.data[0] == 0) {
            this.$message({
              message: data.data[1],
              type: "success"
            });
            this.getUserList();
            this.winTitle=false;
          } else {
            this.$message.error(data.data[1]);
          }
        });
    },
    mod() {
        this.getRequest("/sys/user/update?sysUser.id="
            + this.currentRow.id + "&sysUser.no="
            + this.GongID + "&sysUser.name="
            + this.GongName + "&sysUser.is_enable="
            + this.state + "&sysUser.org_no="
            + this.jiGou + "&sysUser.group_id="
            + this.group ? this.group : '' + "&sysUser.role_ids="
            + this.roles.join(",")
            + "&sysUser.role_names=").then(data => {
            this.msgShow(data, function () {
                this.modWin = false
            })
        })
    },
    closeModWin() {
      this.modWin = false;
    },
    getChartList(){
      this.postRequest("/sys/role/list").then(data=>{
        this.chartList = data.data.list;
      })
    },
    getGroupList(){
      this.postRequest("/sys/user/group/list").then(data=>{
        this.groupList = data.data.list
      })
    },
    getOrgList(){
      this.postRequest("/sys/org/tree").then(data=>{
        console.log(data);
        for(var item of data.data){
          var i=0;
          this.orgList.push({
            label:item.name_full,
            name_full:item.name_full,
            id:item.id,
            options:[]
          });
          this.orgList[i].options=item.children;
          i++;
        }
      })
    },
    reset() {
      this
        .postRequest("/sys/user/resetpwd",{
          uid:this.currentRow.id
        })
        .then(data => {
          if (data.data[0] == 0) {
            this.$message({
              message: data.data[1],
              type: "success"
            });
            this.getUserList();
          } else {
            this.$message.error(data.data[1]);
          }
        });
    },
    rowChange(val){
        console.log(val);
        this.roles=[];
      this.currentRow=val;
      this.GongID=val.org_no;
      this.GongName=val.name;
      if(val.state == '启用'){
          this.state = '1';
      }else{
          this.state = val.state;
      }

      this.roles.push(val.role_ids);
      this.jiGou=val.orgname;
      this.group=val.group_name;
      if(this.winTitle=='添加'){
        this.GongID="";
        this.GongName="";
        this.state="";
        this.roles=[];
        this.jiGou="";
        this.group="";
      }
    }
  },
  computed: {},
  components:{TableData},
  watch: {
      state(){
          console.log(this.state);
      },
      winTitle(){
      if(this.winTitle=='添加'){
        this.GongID="";
        this.GongName="";
        this.state="";
        this.roles=[];
        this.jiGou="";
        this.group="";
      }
    }
  },
  mounted() {
    console.log("userManage");
    this.getUserList();
    this.$emit("sendActive", "2-1");
    this.getChartList();
    this.getGroupList();
    this.getOrgList();
  }
};
</script>
<style scoped src="../../assets/css/allManage/userManage.css">

</style>